<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top: 5%; height: 85%; overflow-y: hidden"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" layout="inline" :model="formModal" :rules="rules">
        <a-form-model-item label="交易类型" required prop="tranType">
          <a-radio-group v-model="formModal.tranType" @change="tranTypeChange">
            <a-radio :value="1"> 实时代收 </a-radio>
            <a-radio :value="2"> 实时代付 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="付款人名称" required prop="payAcctName">
          <a-input v-model="formModal.payAcctName" placeholder="请输入付款人名称" />
        </a-form-model-item>
        <a-form-model-item label="付款人账号" required prop="payAcctNo">
          <a-input v-model="formModal.payAcctNo" placeholder="请输入付款人账号" />
        </a-form-model-item>
        <a-form-model-item label="金额" required prop="amount">
          <a-input
            prefix="￥:"
            :suffix="formatAmount"
            :maxLength="maxLength"
            @change="amountChange"
            v-model="formModal.amount"
            placeholder="请输入金额(单位：元)"
          />
          <a-input v-model="maxAmount" readOnly placeholder="金额大写转换" />
        </a-form-model-item>
        <a-form-model-item label="附言" prop="description">
          <a-textarea :rows="3" v-model="formModal.description" placeholder="请输入附言" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import '../../style/index.less'
import { moneyFormat, rmoney, convertCurrency } from '@/utils/util'

export default {
  name: 'AddEntryModal',
  data() {
    return {
      title: '新增录入',
      visible: false,
      formModal: {
        id: '',
        tranType: 1,
        payAcctName: '',
        payAcctNo: '',
        amount: '',
        description: '',
      },
      // 金额会计格式
      formatAmount: '',
      // 金额大写
      maxAmount: '',
      // 金额最大输入值
      maxLength: 15,
      layout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 14 },
      },
      confirmLoading: false,
      rules: {
        payAcctName: [
          { required: true, message: '请输入付款人名称' },
          { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
        ],
        payAcctNo: [
          { required: true, message: '请输入付款人账号' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
        ],
        amount: [
          { required: true, message: '请输入金额' },
          { min: 0, max: 15, message: '长度不超过 15 个字符', trigger: 'blur' },
        ],
        description: [{ min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }],
      },
    }
  },
  created() {
    //备份formModal原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.formModal))
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.formModal = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
      this.maxAmount = null
      this.formatAmount = null
      this.visible = false
    },
    handleOk() {
      this.$emit('ok')
      /* const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let obj;
            if(!this.formModal.id){
              obj=addRole(this.formModal);
            }else{
              obj=editRole(this.formModal);
            }
            obj.then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }else{
            return false;
          }
        }) */
    },
    handleCancel() {
      this.close()
    },
    // 交易类型改变触发
    tranTypeChange(e) {
      console.log('radio checked', e.target.value)
    },
    // 金额文本框改变触发
    amountChange(e) {
      this.formatAmount = moneyFormat(e.target.value, 4, '.', ',')
      this.maxAmount = convertCurrency(e.target.value)
    },
    /* // 金额输入框失去焦点触发
    amountBlur() {
      if (this.formModal.amount) {
        const amount = this.formModal.amount + ''
        if (amount.length === 15) {
          this.maxLength = 18
        }
        // 自动补零判断
        const amountCut = amount.split('.')
        if (amountCut[1]) {
          if (amountCut[1].length === 1) {
            this.formModal.amount = amount + '0'
          } else {
            this.formModal.amount = amount
          }
        } else {
          this.formModal.amount = amount + '.00'
        }
      }
    },

    // 金额输入框获取焦点
    amountFocus() {
      if (this.formModal.amount) {
        this.formModal.amount = rmoney(this.formModal.amount)
      }
    } */
  },
}
</script>

<style scoped lang="less">
/deep/ .ant-modal-body {
  .ant-row .ant-col-14 {
    width: 86.333%;
  }
  .ant-input-affix-wrapper .ant-input:not(:last-child) {
    padding-right: 300px;
  }
  .ant-input-affix-wrapper .ant-input-suffix {
    color: red;
    font-size: 17px;
    font-weight: bold;
  }
}
</style>
